<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div id="applet" class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">创建小程序管理端</div>
                            </div>
							<div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">应用类型 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select v-model="selected" style="width:200px;" required>
                                        <option value="">请选择类型</option>
                                        <template v-for="(item,index) in list">
                                            <option :value="index+1"> {{ item.name }}</option>
                                        </template>
									</select>
                                </div>
                            </div>
							<div class="am-form-group">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">门店类型</label>
									<div class="am-u-sm-9 am-u-end">
										<label class="am-radio-inline">
											<input type="radio" name="data[shop_mode]" :value="10" v-model="shop_mode" data-am-ucheck>
											单门店
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="data[shop_mode]" :value="20" v-model="shop_mode" data-am-ucheck>
											多门店
										</label>
										<div class="help-block">
	                                        <small>
	                                        	单门店：1个小程序小程序仅可1个店面使用<br>
	                                        	多门店：(连锁经营)1个小程序小程序可配置N个店面使用
	                                        </small>
	                                    </div>
									</div>
								</div>
							<div class="am-form-group">
								<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">门店名称 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="data[shop_name]"
                                           value="" placeholder="请输入门店名称" required>
                                </div>
                            </div>
							<div class="am-form-group">
								<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">联系人 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="data[linkman]"
                                           value="" placeholder="请输入联系人姓名" required>
                                </div>
                            </div>
							<div class="am-form-group">
								<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">联系电话 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="data[phone]"
                                           value="" placeholder="请输入联系人电话" required>
                                </div>
                            </div>
							<div v-if="selected">
								<input type="hidden" name="data[template_id]" :value="list[selected-1].template_id">
								<div class="am-form-group" v-if="list[selected-1].detail">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label">备注说明 </label>
									<div class="am-u-sm-9 am-u-end">
										<input type="text" class="tpl-form-input" :value="list[selected-1].detail" disabled>
									</div>
								</div>
								<div class="am-form-group">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">购买年限</label>
									<div class="am-u-sm-9 am-u-end">
										<label class="am-radio-inline" v-if="list[selected-1].trial_day">
											<input type="radio" name="data[year]" :value="0" v-model="year" data-am-ucheck>
											试用{{list[selected-1].trial_day}}天
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="data[year]" :value="1" v-model="year" data-am-ucheck>
											一年
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="data[year]" :value="2" v-model="year" data-am-ucheck>
											二年
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="data[year]" :value="3" v-model="year" data-am-ucheck>
											三年
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="data[year]" :value="4" v-model="year" data-am-ucheck>
											四年
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="data[year]" :value="5" v-model="year" data-am-ucheck>
											五年
										</label>
									</div>
								</div>
								<div class="am-form-group">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label">支付费用 </label>
									<div class="am-u-sm-9 am-u-end">
										<span style="font-weight:900;color:#ff0000;" v-show="shop_mode==10">￥{{list[selected-1].buy_single[year]}}元</span>
										<span style="font-weight:900;color:#ff0000;" v-show="shop_mode==20">￥{{list[selected-1].buy_many[year]}}元</span>
									</div>
								</div>
								<!-- 表单提交按钮 -->
	                            <div class="am-form-group">
	                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
	                                    <button type="submit" class="j-submit am-btn am-btn-secondary" v-show="shop_mode==10" :disabled="money < list[selected-1].buy_single[year]">
	                                    	{{money < list[selected-1].buy_single[year] ? '余额不足，请先充值' : '确认购买'}}
	                                    </button>
	                                    <button type="submit" class="j-submit am-btn am-btn-secondary" v-show="shop_mode==20" :disabled="money < list[selected-1].buy_many[year]">
											{{money < list[selected-1].buy_many[year] ? '余额不足，请先充值' : '确认购买'}}
	                                    </button>
	                                </div>
	                            </div>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
		
		// 渲染页面
		new Vue({
			el: '#applet',
			data: {
				list: <?= json_encode($list) ?>,
				selected:'',
				shop_mode:10,
				year:1,
				money:<?= $money?>
			}
		});

        $('#my-form').formPost();

    });
</script>
